<template>
	<view>
		
		<!-- 步骤导航 -->
		<view class="grace-steps" style="margin-top:25upx; margin-left: 20upx;">
			<view class="step current">
				<view class="step-circle">1</view>
				<view class="step-content">
					<view class="step-title">完善信息</view>
				</view>
			</view>
			<view class="step current">
				<view class="step-circle">2</view>
				<view class="step-content">
					<view class="step-title">学者认领</view>
				</view>
			</view>
			<view class="step">
				<view class="step-circle">3</view>
				<view class="step-content">
					<view class="step-title">认领完成</view>
				</view>
			</view>
		</view>
		
		<!-- 步骤内容 -->
		<form @submit="formSubmit">
			<view class="searchBox">
				<view class="inputBox"> 
					<input type="text" placeholder="搜索当前单位/院校" v-model="keyword" @confirm="getSsoMember()"
					 placeholder-class="placeholder-class" confirm-type="search">
				</view>
				<view class="searchBtn" @tap="getSsoMember()">搜索</view>
			</view>
			
			<view class="" style="margin: 30upx 20upx;">
				
				<view class="grace-tis">
					 
					<view class="tis-li"  v-for="(item, index) in ssoMember" :key="index" 
						@click="selectAuthor(index)"
						v-bind:style="{backgroundColor:item.bgcolor}">
						<view class="face">
							<image :src="item.avatarImg==''||item.avatarImg==null?'../../../static/touxiang.png':serverUrl+item.avatarImg"></image>
						</view>
						<view class="info">
							<view class="name">
								<label>{{item.realName}}</label>
							</view>
							<view class="org">{{item.workUnitCurrent}}</view>
						</view>
					</view>
					
				</view>
				
			</view>
			
			<view class="table-btn-view">
				<button type="warn" formType="submit" class="save-btn" >下一步</button>
			</view>	
			
		</form>
		
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';		
	export default {
		computed: {
			...mapState(['userInfo', 'hasLogin', 'loginProvider', 'openid'])
		},			
		data() {
			return {
				serverUrl: this.serverUrl,
				ssoMember: []
			};
		},
		onLoad(e){
			this.getSsoMember(e.author);
		},
		methods:{
			...mapMutations(['login', 'logout', 'setOpenid', 'setProvider']),						
			formSubmit: function(e){
				var checkNum = 0;
				var claim = "";
				for(var i =0;i<this.ssoMember.length;i++){	
					if(this.ssoMember[i].check){
						checkNum++;
					}
				}
				if(checkNum==0){
					uni.showToast({
						title: "请先认领学者",
						icon: "none"
					})
					return;
				}else if(checkNum==1){
					claim = "$author:"+this.userInfo.realName+" AND ";
					for(var i =0;i<this.ssoMember.length;i++){
						if(this.ssoMember[i].check){
							claim += "$author_unit:"+this.ssoMember[i].workUnitCurrent;
						}
					}
				}else if(checkNum>1){
					claim = "$author:"+this.userInfo.realName+" AND (";
					for(var i =0;i<this.ssoMember.length;i++){
						if(this.ssoMember[i].check){
							claim += "$author_unit:"+this.ssoMember[i].workUnitCurrent+" OR ";
						}
					}
					claim = claim.substr(0,claim.lastIndexOf("OR")-1)+")";
				}
				//console.log(claim);
				var data  = {
					"username": this.userInfo.username,
					"certification": 1,
					"claimExpression": claim
				}
				this.saveUser(data);
			},
			selectAuthor(index) {
				this.ssoMember[index].check = !this.ssoMember[index].check;
				if(this.ssoMember[index].check){
					this.ssoMember[index].bgcolor='#DDD';
				}else{
					this.ssoMember[index].bgcolor='#FFF';
				}
			},
			getSsoMember(author) {
				this.ssoMember = [];
				var queryStr = '$type:qklw AND $author:'+ author;
				if(this.keyword!=''&&this.keyword!=undefined){
					queryStr = queryStr+' AND $author_unit:'+this.keyword;
				}
				//console.log(queryStr);
				var data = {
					query: queryStr,
					facetFields: "author_unit",
					limit: 8
				};
				uni.request({
					url: this.serverUrl + 'search-api/facet',
					header: {
						"content-type": "application/x-www-form-urlencoded; charset=UTF-8"
					},
					data: data,
					method: "POST",
					success: (r) => {
						// console.log(r);
						if(r.data.code=='000000') {
							let authorUnitTmp = r.data.data.author_unit;
							for(var key in authorUnitTmp ){
								var temp = {
									"avatarImg": "",
									"realName": this.userInfo.realName,
									"workUnitCurrent": key,
									"check": false,
									"bgcolor": "#FFF",
								}
								this.ssoMember.push(temp);
							}
						}else {
							uni.showToast({
								title: r.data.message
							});
						}
					},
					fail: (data, code) => {
						console.log('fail' + JSON.stringify(data));
					}
				})
			},			
			saveUser(data){
				uni.request({
					url: this.serverUrl + 'user-api/editUser',
					header: {
						"content-type": "application/x-www-form-urlencoded; charset=UTF-8"
					},
					method: 'POST',
					data: data,
					success: (r) => {
						//console.log(r);
						this.login(r.data.data); 
						if (r.data.code == '000000') {
							uni.navigateTo({
								url: '../../my/claim-step3/claim-step3'
							})
						} else {
							uni.showToast({
								title: r.errMsg
							});
						}
					},
					fail: (err) => {
						uni.showModal({
							content: err.errMsg,
							showCancel: false
						})
					}
				})
			},				
		}
	}
</script>

<style>

.searchBox {
	width: 95%;
	background-color: rgb(242, 242, 242);
	padding: 7.5px 2.5%;
	display: flex;
	justify-content: space-between;
}

.searchBox .inputBox {
	width: 85%;
	flex-shrink: 1;
	display: flex;
	justify-content: center;
	align-items: center;
}

.searchBox .searchBtn {
	width: 15%;
	margin: 0 0 0 2%;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-shrink: 0;
	font-size: 14px;
	color: #fff;
	background: linear-gradient(to right, #ff9801, #ff570a);
	border-radius: 30px;
}

.searchBox .inputBox>input {
	width: 100%;
	height: 30px;
	font-size: 30upx;
	border: 0;
	border-radius: 30px;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	padding: 0 3%;
	margin: 0;
	background-color: #ffffff;
}

.grace-tis {
	display: flex;
	flex-wrap: wrap;
}
.tis-li {
	width: 48%;
	margin: 15upx 5upx;
	display: flex;
	/* padding-right: 5upx; */
}
.tis-li .face {
	flex-shrink: 0;
	width: 130upx;
	height: 130upx;
}
.tis-li .face image {
	width: 100%;
	height: 100%;
	border-radius: 100%
}
.tis-li .info {
	display: flex;
	flex-flow: wrap;
	padding-left: 10upx;
}
.tis-li .info .name {
	width: 100%;
	font-size: 28upx;
	color: #000;
}
.tis-li .info .org {
	display: flex;
	color: #2F2F2F;
	font-size: 25upx;
}

.table-btn-view {
	/* position: fixed;
	bottom: 27upx; */
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}
	
.table-btn-view .save-btn {
	margin-top: 10upx;
	width: 92%;
	height: 90upx;
	line-height: 90upx;
	background: rgba(0, 170, 255, 1);
	border-radius: 10upx;
	color: #FFFFFF;
}
</style>
